<template>
  <panel-head />
  <div class="btns">
    <el-button type="primary" :icon="Plus" @click="open(null)" >新增</el-button>
  </div>
  <el-table :data="tableData.list" style="width: 100%">
    <el-table-column prop="id" label="id"/>
    <el-table-column prop="name" label="昵称"  />
    <el-table-column prop="permissionName" label="菜单权限" width="500px" />
    <el-table-column  label="操作" >
      <template #default="scope">
        <el-button type="primary" @click="open(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination-info">
    <el-pagination
      v-model:current-page="paginationData.pageNum"
      :page-size="paginationData.pageSize"
      :background="false"
      size="small"
      layout="total, prev, pager, next"
      :total="tableData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
    <el-dialog 
    v-model="dialogTableVisible"
    :before-close="handleClose"
    title="添加权限"
    width="500px"
    >
    <el-form
    ref="formRef"
    label-width="100px"
    label-position="left"
    :model="formData"
    :rules="rules"
    >
    <el-form-item v-show="false" prop="id">
      <el-input v-model="formData.id" />
    </el-form-item>
    <el-form-item label="名称" prop="name">
      <el-input v-model="formData.name" placeholder="请填写权限名称"></el-input>
    </el-form-item>
    <el-form-item label="权限" prop="permissions">
      <el-tree 
      ref="treeRef"
      style="max-width: 600px;"
      :data="permissionsData"
      node-key="id"
      show-checkbox
      :default-checked-keys="defaultKeys"
      :default-expanded-keys="[2]"
      />
    </el-form-item>
    </el-form>
    <template #footer >
      <div class="dialog-footer">
        <el-button type="primary" @click="confirm(formRef)">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref,reactive,onMounted, nextTick } from 'vue'
import {userGetMenu ,userSetMenu,userMenuList} from '@/api/index'
import { Plus } from '@element-plus/icons-vue'

onMounted(()=>{
  userGetMenu().then(({data})=>{
    console.log(data);
    permissionsData.value = data.data
    
  })
  getListData()
})

const paginationData = reactive({
  pageNum:1,
  pageSize:10
})
//列表数据
const tableData = reactive({list:[],total:0})

//打开弹窗
const open = (rowData = {}) => {
  dialogTableVisible.value = true
  //弹窗打开form是异步的
  nextTick(()=>{
    if(rowData){
      Object.assign(formData,{id:rowData.id,name:rowData.name})
      treeRef.value.setCheckedKeys(rowData.permission)
    }
  })
}

const handleSizeChange = (val) => {
  paginationData.pageNum = val
  getListData()
}
const handleCurrentChange = (val) => {
  paginationData.pageSize = val
  getListData()
}
//请求列表数据
const getListData = () => {
  userMenuList(paginationData).then(({data})=>{
  const {list,total} = data.data
  tableData.list = list
  tableData.total = total
  })
}

const formRef = ref(null)
const dialogTableVisible = ref(false)
const formData = reactive({
  id: '',
  name: '',
  permissions: '',
})

//树形菜单权限数据
const permissionsData =ref([])
// 关闭dialog的回调
const handleClose = (done) => {
  dialogTableVisible.value = false
  // 清空表单
 formRef.value.resetFields()
 //tree选择垂直
 treeRef.value.setCheckedKeys([defaultKeys])
}

//选中权限
const defaultKeys = [4,5]

const treeRef = ref(null)

const rules = reactive({
  name: [{ required: true, message: "请输入权限名称", trigger: "blur" }],
})
//表单提交
const confirm = async(FormEl) => {
  if (!FormEl) return;
  await FormEl.validate((valid, fields) => {
    if (valid) {
      const permissions = JSON.stringify(treeRef.value.getCheckedKeys())
      userSetMenu({
        name: formData.name,
        permissions,
        id: formData.id
      }).then(({data}) => {
        handleClose()
        getListData()
        
})
    }else {
      console.log("error submit!", fields);
    }
  })
}


</script>

<style scoped lang="less">
.btns{
  padding:10px 0 10px 10px;
  background-color: #fff; 
}
</style>